<template>
	<view class="biding_warp">
		<view class="biding_w_line">
			<view class="flex f_align f_align_center f_price_input">
				<text class="bold">¥</text>
				<input maxlength="6" v-model="golds" class="input_p" type="number" placeholder="请输入竞价金币" placeholder-style="placeStyle">
			</view>

			<view class="flex f_warp f_align">
				<view
					:class="golds == item ? 'gold_item active' : 'gold_item'"
					v-for="(item,index) in price" :key="index"
					@click="golds = item"
				>
					{{item}}金币
				</view>
			</view>
		</view>
		<view class="cash_methds_warps f f_column">
			<view class="f f_align_center f_align">
				<view class="cash_method bold f f_align_center">选择微信号</view>
				<view @click="$navTo('../cash/cashMeth?cardType=10014002')" class="Mores">
					<text v-if="wxAcc.wxAccount && wxAcc.wxAccount != ''">{{wxAcc.wxAccount}}</text>
					<text v-else>更换微信</text>
					<i class="iconfont iconzu5536"></i>
				</view>
			</view>
		</view>

		<view class="biding_btn_warp">
			<view class="biding_btn bold" @click="doBiddingItem">
				立即竞价
			</view>
		</view>
		<!-- 密码验证 -->
		<pwInput ref="pwInput" @input-ok="isOkDone" :isLoading="loadings" />
	</view>
</template>

<script>
	import pwInput from '@/components/pwInput/pwInput'
	export default {
		data() {
			return {
				price:[30,100,200,500,1000,2000],
				golds:0,
				loadings:false,
				wxAcc:{
					wxAccount:''
				}
			};
		},
		onLoad(option) {
			if(option.itemId){
				this.itemId = option.itemId;
			}
		},
		onShow() {
			const _this = this;
			let wxAccount = uni.getStorageSync('wxAccount');
			if(wxAccount && wxAccount != ''){
				_this.wxAcc = wxAccount;
			}
		},
		methods:{
			//去竞价
			doBiddingItem(){
				const _this = this;
				if(_this.golds <= 0){
					return _this.$showToast('竞价金币必须大于0～')
				};
				if(_this.wxAcc.wxAccount == ''){
					return _this.$showToast('请先选择您的微信账号～')
				};
				//是否设置支付密码
				let userInfo = uni.getStorageSync('userInfo') || '';
				if(userInfo.payPassword && userInfo.payPassword != ''){
					//打开密码验证
					_this.$refs.pwInput.visibleToast = true;
				}else{
					uni.showActionSheet({
						itemList:['未设置支付密码，去设置？'],
						success(e) {
							if(e.tapIndex == 0){
								_this.$navTo('../setting/setting')
							}
						}
					})
				}
			},
			//完成了哦
			async isOkDone(pw){
				const _this = this;
				_this.loadings = true;
				console.log({
					goldCoinAmount:_this.golds,
						itemId:_this.itemId,
						password:pw,
						wechatNo:_this.wxAcc.wxAccount
					}
				)
				let res = (await _this.$http('/api/auth/item/biddingItem','POST',{
					goldCoinAmount:_this.golds,
					itemId:_this.itemId,
					password:pw,
					wechatNo:_this.wxAcc.wxAccount
				})).data;
				_this.loadings = false;
				if(res && res.code == "0"){
					_this.$showToast('竞价成功～');
					_this.golds = 0;
					_this.$refs.pwInput.visibleToast = false;
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.biding_warp{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		.cash_methds_warps{
			padding: 120rpx 36rpx;
			.Mores{
				font-size: 22rpx;
				color: $ych_color;
				.iconfont{font-size: 22rpx;}
			}
			.cash_method{
				font-size: 32rpx;color: #333;
				&::before{
					content: '';
					display:flex;
					width:8rpx;height: 28rpx;
					border-radius: 4rpx;
					background-color: $ych_color;
					margin-right: 16rpx;
				}
			}
		}
		.biding_w_line{
			padding: 24rpx 36rpx 28rpx;
			border-top: solid 1rpx #F6F6F6;
			background-color: #fff;
			.f_price_input{
				border-bottom: solid 1rpx #E6E6E6;
				padding: 24rpx 0;
				.bold{
					font-size: 48rpx;
				}
				.input_p{
					text-align: right;
					width: 85%;
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
					letter-spacing: 5rpx;
				}
			}
			.gold_item{
				width: 212rpx;
				height: 72rpx;
				background-color: #F0F0F0;
				color: #292929;
				font-size: 30rpx;
				margin-top: 30rpx;
				@include flex_center;
				border-radius: 6rpx;
				&.active{
					background-color: $ych_color;
					color: #fff;
				}
			}
		}
		.biding_btn_warp{
			width: 100%;
			margin-top: 192rpx;
			@include flex_center;
			.biding_btn{
				width: 606rpx;
				height: 88rpx;
				background-color: $ych_color;
				border-radius: 12rpx;
				font-size: 30rpx;
				color: #fff;
				@include flex_center;
				@include box_shadow_btn;
			}
		}
	}
</style>
